<template>
	<view class="bg-color">
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="rewardWrap">
				<view class="titleWrap">
					<text class="title">打赏</text>
				</view>
				<view class="numWrap">
					<view @tap="chooseNum(index)" class="num" :class="{beChoose:giftIndex==index}"
						v-for="(item,index) in numList" :key="index">
						<text class="numTop">{{item.name}}</text>
						<text class="numBottom">{{item.label}}</text>
					</view>
					<view @tap="chooseNum(3)" class="num" :class="{beChoose:giftIndex==3}">
						<input class="numInput" v-if="giftIndex==3" v-model="giftNum" type="number"
							:focus="giftIndex==3" cursor-color="#fff" maxlength="10" />
						<text v-else class="numTop">自定义</text>
					</view>
				</view>
				<view class="giftWrap">
					<view @tap="toChoose(index)" v-for="(item,index) in giftList" :key="index" class="chooseWrap"
						:class="{beChoose:isChoose==index}">
						<image @click="clickReward(isChoose==index)" class="icon" :src="`${httpUrl}/app/file/viewFile?fileId=${item.icon}`"></image>
						<text class="iconName">{{item.giftName}}</text>
						<text class="giftPrice">{{item.giftPrice}}</text>
						<view @click="reward(1)" v-if="isChoose==index" class="give">
							<text class="giveText">赠送</text>
						</view>
					</view>
				</view>
				<view class="payWrap">
					<view class="payLeft">
						<image class="diamond" src="../../static/img/diamond.png"></image>
						<text class="diamondNum">钻石:{{diamondBalance}}</text>
						<text @tap="toChong" class="chong">充值</text>
						<image style="width: 24rpx;height: 24rpx;" src="../../static/img/chevron-right.png"></image>
					</view>
					<view @tap="reward(0)" class="payRight">
						<text class="payTxt">打赏</text>
					</view>
				</view>
				<view class="bar"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import { listGiftConfig, userWallet, rewardTrendsGift, listRechargeListDiamond } from '@/utils/api/index.ts';
	const httpUrl = ref(getApp().globalData.baseUrl)
	onShow(()=>{
		uni.$once('successful',()=>{
			getList()
		})
	})
	// 关闭打赏返回
	const close = () => {
		uni.navigateBack({
			success: function () {
				uni.$emit('refreshData', { trendsId: trendsId.value,commentsId:commentsId.value, backIndex: backIndex.value,backIndexs:backIndexs.value });
			}
		})
	}
	// 送礼物数量
	const numList = ref([{
		name: '送1个',
		key: 1,
		label: '一心一意'
	}, {
		name: '送10个',
		key: 10,
		label: '完美'
	}, {
		name: '送66个',
		key: 66,
		label: '6的飞起'
	}])
	const giftNum = ref()
	const giftIndex = ref<number | null>(null)
	const chooseNum = (index : number) => {
		giftIndex.value = index
		if (index == 3) {
			giftNum.value = 0
		} else {
			giftNum.value = numList.value[index].key
		}
	}
	// 礼物列表
	const isChoose = ref<number | null>(null)
	const giftList = ref<any>([])
	const diamondBalance = ref()
	const getList = async () => {
		const res = await listGiftConfig()
		giftList.value = res.data
		const e = await userWallet()
		diamondBalance.value = e.data.diamondBalance
		const data = await listRechargeListDiamond()
		rechargeList.value = data.data
	}
	const toChoose = (index : number) => {
		isChoose.value = index
	}
	// 打赏
	const check = () => {
		if (!giftNum.value) {
			uni.showToast({
				title: '请选择礼物数量',
				icon: 'none'
			});
			return true
		} else if (isChoose.value == null) {
			uni.showToast({
				title: '请选择礼物',
				icon: 'none'
			});
			return true
		} else {
			return false
		}
	}
	
	const clickReward = async (selectFlag)=>{
		if(selectFlag){
			reward(1)
		}
	}
	
	const reward = async (i) => {
		if (!i && check()) {
			return
		}
		const num = i?1:giftNum.value
		if( giftList.value[isChoose.value].giftPrice * num > diamondBalance.value){
			uni.showModal({
				title:'提示',
				content:'当前钻石不足，是否跳转充值?',
				success:(e)=>{
					if(e.confirm){
						toChong()
					}
				}
			})
			return;
		}
		const data = {
			trendsId: trendsId.value?trendsId.value:null,
			giftId: giftList.value[isChoose.value]?.id,
			giftNum: num,
			commentsId:commentsId.value?commentsId.value:null
		}
		const res = await rewardTrendsGift({ data: data })
		uni.showToast({
			title: res.data,
			icon: 'none'
		});
		const e = await userWallet()
		diamondBalance.value = e.data.diamondBalance
	}
	// 充值
	const toChong = () => {
		uni.navigateTo({
			url: `/pages/qiangqiang/recharge?id=${trendsId.value}`,
			animationType: 'slide-in-bottom',
			animationDuration: 250
		})
	}
	const rechargeList = ref<any>([])
	const trendsId = ref('')
	const commentsId=ref('')
	const backIndex = ref(0)
	const backIndexs = ref(0)
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	onLoad(async (option) => {
		trendsId.value = option.id
		backIndex.value = option.index
		backIndexs.value = option.backIndexs
		commentsId.value = option.commentsId
		await getList()
		popup.value.open('bottom')
	})
</script>

<style>
	page {
		background: transparent;
	}

	.bg-color {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.rewardWrap {
		width: 100%;
		padding-bottom: 200rpx;
		background: #161824;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.titleWrap {
		width: 100%;
		height: 102rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}

	.numWrap {
		width: 100%;
		height: 102rpx;
		display: flex;
	}

	.num {
		width: 176rpx;
		height: 102rpx;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 16rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.numInput {
		width: 60%;
		height: 102rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		color: #fff;
	}

	.numTop {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}

	.numBottom {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.60);
	}

	.giftWrap {
		width: 100%;
		margin-top: 23rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.chooseWrap {
		width: 175rpx;
		height: 260rpx;
		border-radius: 16rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.beChoose {
		background: url('../../static/img/gifdBJ.png') no-repeat;
		background-size: cover;
	}

	.icon {
		width: 120rpx;
		height: 120rpx;
		margin-top: 20rpx;
	}

	.iconName {
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.60);
		margin-top: 10rpx;
	}

	.giftPrice {
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.80);
		margin-top: 10rpx;
	}

	.give {
		width: 175rpx;
		height: 44rpx;
		margin-top: 15rpx;
		background: #FF263F;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.giveText {
		font-size: 16rpx;
		font-weight: bold;
		color: #fff;
	}

	.payWrap {
		width: 100%;
		height: 96rpx;
		background: #22242f;
		position: fixed;
		bottom: 68rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payLeft {
		height: 96rpx;
		display: flex;
		align-items: center;
	}

	.diamond {
		width: 24rpx;
		height: 24rpx;
		margin-left: 34rpx;
	}

	.diamondNum {
		font-size: 24rpx;
		color: #fff;
	}

	.chong {
		color: #6B64D3;
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 24rpx;
	}

	.payRight {
		width: 190rpx;
		height: 80rpx;
		background: #FF263F;
		border-radius: 40rpx;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.payTxt {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.bar {
		width: 100%;
		height: 68rpx;
		background: #22242f;
		position: fixed;
		bottom: 0;
	}

	.popupsRecharge {
		width: 100%;
		height: 1004rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.popupTitle {
		width: 100%;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rechargeWrap {
		width: 92%;
		margin-left: 4%;
		display: flex;
		flex-wrap: wrap;
	}

	.recharge {
		width: 213rpx;
		height: 154rpx;
		background: #F4F6FA;
		border-radius: 24rpx;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.beRecharge{
		background: #FFDED3;
		color: #FF263F;
	}
	.rechargeInput {
		width: 213rpx;
		height: 154rpx;
		text-align: center;
	}

	.rechargeTitle {
		font-size: 28rpx;
		color: #262626;
		margin-top: 24rpx;
	}

	.rechargeVal {
		color: #BFBFBF;
		font-size: 28rpx;
		margin-top: 16rpx;
	}

	.typeWrap {
		width: 92%;
		margin-top: 32rpx;
		margin-left: 4%;
		border-top: 1rpx solid #F4F6FA;
	}

	.type {
		width: 100%;
		height: 64rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.types {
		height: 64rpx;
		display: flex;
		align-items: center;
	}

	.typeImg {
		width: 68rpx;
		height: 48rpx;
	}

	.typeText {
		color: #262626;
		font-size: 28rpx;
		margin-left: 8rpx;
	}

	.chooseType {
		width: 36rpx;
		height: 36rpx;
	}

	.moneyWraps {
		width: 100%;
		height: 106rpx;
		margin-top: 32rpx;
		border-top: 2rpx solid #F4F6FA;
	}

	.moneyWrap {
		width: 92%;
		height: 106rpx;
		margin-left: 4%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.liji {
		width: 190rpx;
		height: 80rpx;
		background: #FF263F;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #fff;
	}

	.lastWrap {
		width: 100%;
		height: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>